<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Css在图片上产生的间隙</title>
</head>
<body>
  <h1>img是行内块元素 inline-block，当出现回车的时候，会折叠成空格</h1>
  <div id="div1">
    <!-- 像这种就两个元素之间没有任何缝隙的，没有空格或者回车作为隔离的，就不会出现间隙 -->
    <img src="https://source.unsplash.com/random" alt=""><img src="https://source.unsplash.com/random?a=1" alt="">
    <img src="https://source.unsplash.com/random?a=1" alt="">
    <img src="https://source.unsplash.com/random?a=2" alt="">
  </div>
  <h2>因此，如果空格的字体大小为零，就不会存在缝隙了</h2>
  <div id="div2">
    <img src="https://source.unsplash.com/random?a=3" alt="">
    <img src="https://source.unsplash.com/random?a=4" alt="">
    <img src="https://source.unsplash.com/random?a=5" alt="">
  </div>
</body>
<style>
  img {
    height: 480px;
    height: 270px;
  }

  #div2 {
    font-size: 0; 
    /* letter-spacing: 0 的效果也是一样的，但只能去除水平方向的空隙 */
  }
</style>
</html>